<template>
    <view id="loadding" class="loadding">
        <view :style="ballStyle"></view>
        <view :style="ballStyle"></view>
    </view>
</template>

<script setup lang="js">
import { computed } from 'vue'
const { size = 16 } = defineProps({ size: Number })

const ballStyle = computed(() => ({
    width: `${size}rpx`,
    height: `${size}rpx`,
    '--translate-value': `${size}rpx`
}))
</script>

<style lang="scss" scoped>
@keyframes leftLoad {
    0% {
        transform: translateX(0) scale(1);
        z-index: 2;
    }

    25% {
        z-index: 5;
        transform: translateX(calc(var(--translate-value) * 0.5)) scale(1.2);
    }

    50% {
        z-index: 2;
        transform: translateX(var(--translate-value)) scale(1);
    }

    75% {
        z-index: 1;
        transform: translateX(calc(var(--translate-value) * 0.5)) scale(0.8);
    }

    100% {
        transform: translateX(0) scale(1);
        z-index: 2;
    }
}

@keyframes rightLoad {
    0% {
        transform: translateX(0) scale(1);
        z-index: 2;
    }

    25% {
        z-index: 1;
        transform: translateX(calc(var(--translate-value) * -0.5)) scale(0.8);
    }

    50% {
        z-index: 2;
        transform: translateX(calc(var(--translate-value) * -1)) scale(1);
    }

    75% {
        z-index: 5;
        transform: translateX(calc(var(--translate-value) * -0.5)) scale(1.2);
    }

    100% {
        transform: translateX(0) scale(1);
        z-index: 2;
    }
}

.loadding {
    display: flex;
    align-items: center;
}

.loadding view {
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);

    &:nth-child(1) {
        background: #ddf80c;
        animation: leftLoad infinite linear .7s;
    }

    &:nth-child(2) {
        background: #8238DE;
        animation: rightLoad infinite linear .7s;
    }
}
</style>
